<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">盒子一</div>
    <div class="box">盒子二</div>
    <div class="nav">
        <ul>
            <li>好久不见</li>
            <li>富士山下</li>
            <li>浮夸</li>
            <li>因为爱情</li>
        </ul>

    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        let boxs = document.getElementsByClassName('box');
        console.log(boxs);// 得到两个伪数组

        //2. 返回符合条件的第一个元素      querySelector（查询选择器）
        console.log(document.querySelector('#nav')); // id
        console.log(document.querySelector('.box')); // 类名
        console.log(document.querySelector('li')); // 标签

        // 3。 返回数组     querySelectorAll（查询选择器全部）
        console.log(document.querySelectorAll('li')); // 4个伪数组
    </script>
</body>

</html>